<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Parser API</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="UD" name="w3c-status">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-UD" rel="stylesheet" type="text/css">
  <link href="https://drafts.css-houdini.org/css-parser-api/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Parser API</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Unofficial Proposal Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://drafts.css-houdini.org/css-parser-api/">https://drafts.css-houdini.org/css-parser-api/</a>
     <dt>Feedback:
     <dd><span><a href="mailto:public-houdini@w3.org?subject=%5Bcss-parser-api%5D%20YOUR%20TOPIC%20HERE">public-houdini@w3.org</a> with subject line “<kbd>[css-parser-api] <i data-lt>… message topic …</i></kbd>” (<a href="http://lists.w3.org/Archives/Public/public-houdini/" rel="discussion">archives</a>)</span>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Tab Atkins-Bittner</span>
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Greg Whitworth</span>
     <dt>Issue Tracking:
     <dd><a href="https://github.com/w3c/css-houdini-drafts/labels/css-parser-api-1">GitHub Issues</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>An API exposing the CSS parser more directly,

for parsing arbitrary CSS-like languages into a mildly typed representation.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#parsing-api"><span class="secno">2</span> <span class="content">Parsing API</span></a>
    <li><a href="#parser-values"><span class="secno">3</span> <span class="content">Parser Values</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conformance-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#partial"><span class="secno"></span> <span class="content"> Partial implementations</span></a>
       <ol class="toc">
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
       </ol>
      <li><a href="#testing"><span class="secno"></span> <span class="content"> Non-experimental implementations</span></a>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>Common data-interchange / parsing formats are very valuable
for reducing the learning curve of new languages,
as users get to lean on their existing knowledge of the format when authoring
and only have to newly learn the specifics of the language.
This is why generic parsing formats like XML or JSON have become so popular.</p>
   <p>The CSS language could benefit from this same treatment;
a number of languages and tools rely on CSS-like syntax to express themselves,
but they usually rely on ad-hoc parsing
(often regex-based)
which can be relatively fragile,
and might break with CSS practices in interesting syntax corner cases.
Similarly, CSS syntax is increasingly used in places like attribute values
(such as the <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-sizes" id="ref-for-attr-img-sizes">sizes</a></code> attribute,
or most of the SVG presentation attributes),
and custom elements wanting to do the same thing
similarly have to rely on ad-hoc parsing right now.</p>
   <p>To help with these sorts of cases,
this spec exposes the <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a> parsing algorithms,
and represents their results in a mildly-typed representation,
simpler and more abstract than what <a data-link-type="biblio" href="#biblio-css-typed-om-1">[css-typed-om-1]</a> does for CSS properties.</p>
   <h2 class="heading settled" data-level="2" id="parsing-api"><span class="secno">2. </span><span class="content">Parsing API</span><a class="self-link" href="#parsing-api"></a></h2>
<pre class="idl highlight def"><c- b>typedef</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://streams.spec.whatwg.org/#rs-class" id="ref-for-rs-class"><c- n>ReadableStream</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-type="typedef" data-export id="typedefdef-cssstringsource"><code><c- g>CSSStringSource</c-></code></dfn>;
<c- b>typedef</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue" id="ref-for-cssstylevalue"><c- n>CSSStyleValue</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue"><c- n>CSSParserValue</c-></a>) <dfn class="dfn-paneled idl-code" data-dfn-type="typedef" data-export id="typedefdef-csstoken"><code><c- g>CSSToken</c-></code></dfn>;

<c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css"><c- g>CSS</c-></a> {
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule"><c- n>CSSParserRule</c-></a>>> <dfn class="idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="parseStylesheet(css, options)|parseStylesheet(css)" id="dom-css-parsestylesheet"><code><c- g>parseStylesheet</c-></code><a class="self-link" href="#dom-css-parsestylesheet"></a></dfn>(<a class="n" data-link-type="idl-name" href="#typedefdef-cssstringsource" id="ref-for-typedefdef-cssstringsource"><c- n>CSSStringSource</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseStylesheet(css, options), CSS/parseStylesheet(css)" data-dfn-type="argument" data-export id="dom-css-parsestylesheet-css-options-css"><code><c- g>css</c-></code><a class="self-link" href="#dom-css-parsestylesheet-css-options-css"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions"><c- n>CSSParserOptions</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseStylesheet(css, options), CSS/parseStylesheet(css)" data-dfn-type="argument" data-export id="dom-css-parsestylesheet-css-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-css-parsestylesheet-css-options-options"></a></dfn>);
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule①"><c- n>CSSParserRule</c-></a>>> <dfn class="idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="parseRuleList(css, options)|parseRuleList(css)" id="dom-css-parserulelist"><code><c- g>parseRuleList</c-></code><a class="self-link" href="#dom-css-parserulelist"></a></dfn>(<a class="n" data-link-type="idl-name" href="#typedefdef-cssstringsource" id="ref-for-typedefdef-cssstringsource①"><c- n>CSSStringSource</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseRuleList(css, options), CSS/parseRuleList(css)" data-dfn-type="argument" data-export id="dom-css-parserulelist-css-options-css"><code><c- g>css</c-></code><a class="self-link" href="#dom-css-parserulelist-css-options-css"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions①"><c- n>CSSParserOptions</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseRuleList(css, options), CSS/parseRuleList(css)" data-dfn-type="argument" data-export id="dom-css-parserulelist-css-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-css-parserulelist-css-options-options"></a></dfn>);
  <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule②"><c- n>CSSParserRule</c-></a>> <dfn class="idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="parseRule(css, options)|parseRule(css)" id="dom-css-parserule"><code><c- g>parseRule</c-></code><a class="self-link" href="#dom-css-parserule"></a></dfn>(<a class="n" data-link-type="idl-name" href="#typedefdef-cssstringsource" id="ref-for-typedefdef-cssstringsource②"><c- n>CSSStringSource</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseRule(css, options), CSS/parseRule(css)" data-dfn-type="argument" data-export id="dom-css-parserule-css-options-css"><code><c- g>css</c-></code><a class="self-link" href="#dom-css-parserule-css-options-css"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions②"><c- n>CSSParserOptions</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseRule(css, options), CSS/parseRule(css)" data-dfn-type="argument" data-export id="dom-css-parserule-css-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-css-parserule-css-options-options"></a></dfn>);
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule③"><c- n>CSSParserRule</c-></a>>> <dfn class="idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="parseDeclarationList(css, options)|parseDeclarationList(css)" id="dom-css-parsedeclarationlist"><code><c- g>parseDeclarationList</c-></code><a class="self-link" href="#dom-css-parsedeclarationlist"></a></dfn>(<a class="n" data-link-type="idl-name" href="#typedefdef-cssstringsource" id="ref-for-typedefdef-cssstringsource③"><c- n>CSSStringSource</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseDeclarationList(css, options), CSS/parseDeclarationList(css)" data-dfn-type="argument" data-export id="dom-css-parsedeclarationlist-css-options-css"><code><c- g>css</c-></code><a class="self-link" href="#dom-css-parsedeclarationlist-css-options-css"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions③"><c- n>CSSParserOptions</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseDeclarationList(css, options), CSS/parseDeclarationList(css)" data-dfn-type="argument" data-export id="dom-css-parsedeclarationlist-css-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-css-parsedeclarationlist-css-options-options"></a></dfn>);
  <a class="n" data-link-type="idl-name" href="#cssparserdeclaration" id="ref-for-cssparserdeclaration"><c- n>CSSParserDeclaration</c-></a> <dfn class="idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="parseDeclaration(css, options)|parseDeclaration(css)" id="dom-css-parsedeclaration"><code><c- g>parseDeclaration</c-></code><a class="self-link" href="#dom-css-parsedeclaration"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseDeclaration(css, options), CSS/parseDeclaration(css)" data-dfn-type="argument" data-export id="dom-css-parsedeclaration-css-options-css"><code><c- g>css</c-></code><a class="self-link" href="#dom-css-parsedeclaration-css-options-css"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions④"><c- n>CSSParserOptions</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseDeclaration(css, options), CSS/parseDeclaration(css)" data-dfn-type="argument" data-export id="dom-css-parsedeclaration-css-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-css-parsedeclaration-css-options-options"></a></dfn>);
  <a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken"><c- n>CSSToken</c-></a> <dfn class="idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="parseValue(css)" id="dom-css-parsevalue"><code><c- g>parseValue</c-></code><a class="self-link" href="#dom-css-parsevalue"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseValue(css)" data-dfn-type="argument" data-export id="dom-css-parsevalue-css-css"><code><c- g>css</c-></code><a class="self-link" href="#dom-css-parsevalue-css-css"></a></dfn>);
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken①"><c- n>CSSToken</c-></a>> <dfn class="dfn-paneled idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="parseValueList(css)" id="dom-css-parsevaluelist"><code><c- g>parseValueList</c-></code></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseValueList(css)" data-dfn-type="argument" data-export id="dom-css-parsevaluelist-css-css"><code><c- g>css</c-></code><a class="self-link" href="#dom-css-parsevaluelist-css-css"></a></dfn>);
  <c- b>sequence</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken②"><c- n>CSSToken</c-></a>>> <dfn class="dfn-paneled idl-code" data-dfn-for="CSS" data-dfn-type="method" data-export data-lt="parseCommaValueList(css)" id="dom-css-parsecommavaluelist"><code><c- g>parseCommaValueList</c-></code></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSS/parseCommaValueList(css)" data-dfn-type="argument" data-export id="dom-css-parsecommavaluelist-css-css"><code><c- g>css</c-></code><a class="self-link" href="#dom-css-parsecommavaluelist-css-css"></a></dfn>);
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-cssparseroptions"><code><c- g>CSSParserOptions</c-></code></dfn> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="CSSParserOptions" data-dfn-type="dict-member" data-export data-type="object " id="dom-cssparseroptions-atrules"><code><c- g>atRules</c-></code></dfn>;
  /* dict of at-rule name => at-rule type
     (contains decls or contains qualified rules) */
};
</pre>
   <p class="issue" id="issue-6a26a0eb"><a class="self-link" href="#issue-6a26a0eb"></a> <code class="idl"><a data-link-type="idl" href="#dom-css-parsecommavaluelist" id="ref-for-dom-css-parsecommavaluelist">parseCommaValueList()</a></code> is in Syntax, and thus here,
because it’s actually a very common operation.
It’s trivial to do yourself
(just call <code class="idl"><a data-link-type="idl" href="#dom-css-parsevaluelist" id="ref-for-dom-css-parsevaluelist">parseValueList()</a></code> and then split into an array on top-level commas),
but comma-separated lists are so common
that it was worthwhile to improve spec ergonomics
by providing a shortcut for that functionality.
Is it worth it to provide this to JS as well?</p>
   <p class="issue" id="issue-7aa73841"><a class="self-link" href="#issue-7aa73841"></a> Do we handle comments?
Currently I don’t;
Syntax by default just drops comments,
but allows an impl to preserve information about them if they want.
Maybe add an option to preserve comments?
If so, they can appear *anywhere*,
in any API that returns a sequence.</p>
   <p class="issue" id="issue-f4c16a5c"><a class="self-link" href="#issue-f4c16a5c"></a> What do we do if an unknown at-rule
(not appearing in the <code class="idl"><a data-link-type="idl" href="#dom-cssparseroptions-atrules" id="ref-for-dom-cssparseroptions-atrules">atRules</a></code> option)
shows up in the results?
Default to decls or rules?
Or treat it more simply as just a token sequence?</p>
   <p class="issue" id="issue-1d39aadf"><a class="self-link" href="#issue-1d39aadf"></a> Parsing stylesheets/rule lists should definitely be async,
because stylesheets can be quite large.
Parsing individual properties/value lists should definitely be sync,
because they’re small and it would be really annoying.
Parsing a single rule, tho, is unclear—<wbr>is it large enough to be worth making async,
or is it too annoying to be worth it?</p>
   <h2 class="heading settled" data-level="3" id="parser-values"><span class="secno">3. </span><span class="content">Parser Values</span><a class="self-link" href="#parser-values"></a></h2>
<pre class="idl highlight def"><c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="cssparserrule"><code><c- g>CSSParserRule</c-></code></dfn> {
  /* Just a superclass. */
};

[<dfn class="idl-code" data-dfn-for="CSSParserAtRule" data-dfn-type="constructor" data-export data-lt="CSSParserAtRule(name, prelude, body)|CSSParserAtRule(name, prelude)" id="dom-cssparseratrule-cssparseratrule"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-cssparseratrule-cssparseratrule"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSParserAtRule/CSSParserAtRule(name, prelude, body)" data-dfn-type="argument" data-export id="dom-cssparseratrule-cssparseratrule-name-prelude-body-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-cssparseratrule-cssparseratrule-name-prelude-body-name"></a></dfn>, <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken③"><c- n>CSSToken</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserAtRule/CSSParserAtRule(name, prelude, body)" data-dfn-type="argument" data-export id="dom-cssparseratrule-cssparseratrule-name-prelude-body-prelude"><code><c- g>prelude</c-></code><a class="self-link" href="#dom-cssparseratrule-cssparseratrule-name-prelude-body-prelude"></a></dfn>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule④"><c- n>CSSParserRule</c-></a>>? <dfn class="idl-code" data-dfn-for="CSSParserAtRule/CSSParserAtRule(name, prelude, body)" data-dfn-type="argument" data-export id="dom-cssparseratrule-cssparseratrule-name-prelude-body-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-cssparseratrule-cssparseratrule-name-prelude-body-body"></a></dfn>)]
<c- b>interface</c-> <dfn class="idl-code" data-dfn-type="interface" data-export id="cssparseratrule"><code><c- g>CSSParserAtRule</c-></code><a class="self-link" href="#cssparseratrule"></a></dfn> : <a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑤"><c- n>CSSParserRule</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSParserAtRule" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-cssparseratrule-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-cssparseratrule-name"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue①"><c- n>CSSParserValue</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserAtRule" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<CSSParserValue>" id="dom-cssparseratrule-prelude"><code><c- g>prelude</c-></code><a class="self-link" href="#dom-cssparseratrule-prelude"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑥"><c- n>CSSParserRule</c-></a>>? <dfn class="idl-code" data-dfn-for="CSSParserAtRule" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<CSSParserRule>?" id="dom-cssparseratrule-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-cssparseratrule-body"></a></dfn>;
  /* nullable to handle at-statements */
  <dfn data-dfn-for="CSSParserAtRule" data-dfn-type="dfn" data-export data-lt="stringification behavior" id="CSSParserAtRule-stringification-behavior"><c- b>stringifier</c-><a class="self-link" href="#CSSParserAtRule-stringification-behavior"></a></dfn>;
};

[<dfn class="idl-code" data-dfn-for="CSSParserQualifiedRule" data-dfn-type="constructor" data-export data-lt="CSSParserQualifiedRule(prelude, body)|CSSParserQualifiedRule(prelude)" id="dom-cssparserqualifiedrule-cssparserqualifiedrule"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-cssparserqualifiedrule-cssparserqualifiedrule"></a></dfn>(<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken④"><c- n>CSSToken</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserQualifiedRule/CSSParserQualifiedRule(prelude, body)" data-dfn-type="argument" data-export id="dom-cssparserqualifiedrule-cssparserqualifiedrule-prelude-body-prelude"><code><c- g>prelude</c-></code><a class="self-link" href="#dom-cssparserqualifiedrule-cssparserqualifiedrule-prelude-body-prelude"></a></dfn>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑦"><c- n>CSSParserRule</c-></a>>? <dfn class="idl-code" data-dfn-for="CSSParserQualifiedRule/CSSParserQualifiedRule(prelude, body)" data-dfn-type="argument" data-export id="dom-cssparserqualifiedrule-cssparserqualifiedrule-prelude-body-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-cssparserqualifiedrule-cssparserqualifiedrule-prelude-body-body"></a></dfn>)]
<c- b>interface</c-> <dfn class="idl-code" data-dfn-type="interface" data-export id="cssparserqualifiedrule"><code><c- g>CSSParserQualifiedRule</c-></code><a class="self-link" href="#cssparserqualifiedrule"></a></dfn> : <a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑧"><c- n>CSSParserRule</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue②"><c- n>CSSParserValue</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserQualifiedRule" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<CSSParserValue>" id="dom-cssparserqualifiedrule-prelude"><code><c- g>prelude</c-></code><a class="self-link" href="#dom-cssparserqualifiedrule-prelude"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑨"><c- n>CSSParserRule</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserQualifiedRule" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<CSSParserRule>" id="dom-cssparserqualifiedrule-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-cssparserqualifiedrule-body"></a></dfn>;
  <dfn data-dfn-for="CSSParserQualifiedRule" data-dfn-type="dfn" data-export data-lt="stringification behavior" id="CSSParserQualifiedRule-stringification-behavior"><c- b>stringifier</c-><a class="self-link" href="#CSSParserQualifiedRule-stringification-behavior"></a></dfn>;
};

[<dfn class="idl-code" data-dfn-for="CSSParserDeclaration" data-dfn-type="constructor" data-export data-lt="CSSParserDeclaration(name, body)|CSSParserDeclaration(name)" id="dom-cssparserdeclaration-cssparserdeclaration"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-cssparserdeclaration-cssparserdeclaration"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑧"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSParserDeclaration/CSSParserDeclaration(name, body)" data-dfn-type="argument" data-export id="dom-cssparserdeclaration-cssparserdeclaration-name-body-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-cssparserdeclaration-cssparserdeclaration-name-body-name"></a></dfn>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule①⓪"><c- n>CSSParserRule</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserDeclaration/CSSParserDeclaration(name, body)" data-dfn-type="argument" data-export id="dom-cssparserdeclaration-cssparserdeclaration-name-body-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-cssparserdeclaration-cssparserdeclaration-name-body-body"></a></dfn>)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="cssparserdeclaration"><code><c- g>CSSParserDeclaration</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule①①"><c- n>CSSParserRule</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑨"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSParserDeclaration" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-cssparserdeclaration-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-cssparserdeclaration-name"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue③"><c- n>CSSParserValue</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserDeclaration" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<CSSParserValue>" id="dom-cssparserdeclaration-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-cssparserdeclaration-body"></a></dfn>;
  <dfn data-dfn-for="CSSParserDeclaration" data-dfn-type="dfn" data-export data-lt="stringification behavior" id="CSSParserDeclaration-stringification-behavior"><c- b>stringifier</c-><a class="self-link" href="#CSSParserDeclaration-stringification-behavior"></a></dfn>;
};

<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="cssparservalue"><code><c- g>CSSParserValue</c-></code></dfn> {
  /* Just a superclass. */
};

[<dfn class="idl-code" data-dfn-for="CSSParserBlock" data-dfn-type="constructor" data-export data-lt="CSSParserBlock(name, body)" id="dom-cssparserblock-cssparserblock"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-cssparserblock-cssparserblock"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⓪"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSParserBlock/CSSParserBlock(name, body)" data-dfn-type="argument" data-export id="dom-cssparserblock-cssparserblock-name-body-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-cssparserblock-cssparserblock-name-body-name"></a></dfn>, <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue④"><c- n>CSSParserValue</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserBlock/CSSParserBlock(name, body)" data-dfn-type="argument" data-export id="dom-cssparserblock-cssparserblock-name-body-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-cssparserblock-cssparserblock-name-body-body"></a></dfn>)]
<c- b>interface</c-> <dfn class="idl-code" data-dfn-type="interface" data-export id="cssparserblock"><code><c- g>CSSParserBlock</c-></code><a class="self-link" href="#cssparserblock"></a></dfn> : <a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑤"><c- n>CSSParserValue</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSParserBlock" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-cssparserblock-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-cssparserblock-name"></a></dfn>; /* "[]", "{}", or "()" */
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑥"><c- n>CSSParserValue</c-></a>> <dfn class="idl-code" data-dfn-for="CSSParserBlock" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<CSSParserValue>" id="dom-cssparserblock-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-cssparserblock-body"></a></dfn>;
  <dfn data-dfn-for="CSSParserBlock" data-dfn-type="dfn" data-export data-lt="stringification behavior" id="CSSParserBlock-stringification-behavior"><c- b>stringifier</c-><a class="self-link" href="#CSSParserBlock-stringification-behavior"></a></dfn>;
};

[<dfn class="idl-code" data-dfn-for="CSSParserFunction" data-dfn-type="constructor" data-export data-lt="CSSParserFunction(name, args)" id="dom-cssparserfunction-cssparserfunction"><code><c- g>Constructor</c-></code><a class="self-link" href="#dom-cssparserfunction-cssparserfunction"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①②"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSParserFunction/CSSParserFunction(name, args)" data-dfn-type="argument" data-export id="dom-cssparserfunction-cssparserfunction-name-args-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-cssparserfunction-cssparserfunction-name-args-name"></a></dfn>, <c- b>sequence</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑦"><c- n>CSSParserValue</c-></a>>> <dfn class="idl-code" data-dfn-for="CSSParserFunction/CSSParserFunction(name, args)" data-dfn-type="argument" data-export id="dom-cssparserfunction-cssparserfunction-name-args-args"><code><c- g>args</c-></code><a class="self-link" href="#dom-cssparserfunction-cssparserfunction-name-args-args"></a></dfn>)]
<c- b>interface</c-> <dfn class="idl-code" data-dfn-type="interface" data-export id="cssparserfunction"><code><c- g>CSSParserFunction</c-></code><a class="self-link" href="#cssparserfunction"></a></dfn> : <a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑧"><c- n>CSSParserValue</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①③"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="CSSParserFunction" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-cssparserfunction-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-cssparserfunction-name"></a></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑨"><c- n>CSSParserValue</c-></a>>> <dfn class="idl-code" data-dfn-for="CSSParserFunction" data-dfn-type="attribute" data-export data-readonly data-type="FrozenArray<FrozenArray<CSSParserValue>>" id="dom-cssparserfunction-args"><code><c- g>args</c-></code><a class="self-link" href="#dom-cssparserfunction-args"></a></dfn>;
  <dfn data-dfn-for="CSSParserFunction" data-dfn-type="dfn" data-export data-lt="stringification behavior" id="CSSParserFunction-stringification-behavior"><c- b>stringifier</c-><a class="self-link" href="#CSSParserFunction-stringification-behavior"></a></dfn>;
};
</pre>
   <p class="issue" id="issue-296fa7f8"><a class="self-link" href="#issue-296fa7f8"></a> Trying to be as useful as possible,
without exposing so many details that we’re unable to change tokenization in the future.
In particular, whitespace and delims all get parsed into DOMStrings.
Am I succeeding at this goal?</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
    descriptive assertions and RFC 2119 terminology. The key words “MUST”,
    “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
    “RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
    document are to be interpreted as described in RFC 2119.
    However, for readability, these words do not appear in all uppercase
    letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
    explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
  <p>Examples in this specification are introduced with the words “for example”
    or are set apart from the normative text with <code>class="example"</code>,
    like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example.</p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
    normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note.</p>
  <p>Advisements are normative sections styled to evoke special attention and are
    set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
    this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
  <p>Conformance to this specification
    is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
            style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
            documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
    if all of its statements that use syntax defined in this module are valid
    according to the generic CSS grammar and the individual grammars of each
    feature defined in this module. </p>
  <p>A renderer is conformant to this specification
    if, in addition to interpreting the style sheet as defined by the
    appropriate specifications, it supports all the features defined
    by this specification by parsing them correctly
    and rendering the document accordingly. However, the inability of a
    UA to correctly render a document due to limitations of the device
    does not make the UA non-conformant. (For example, a UA is not
    required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
    if it writes style sheets that are syntactically correct according to the
    generic CSS grammar and the individual grammars of each feature in
    this module, and meet all other conformance requirements of style sheets
    as described in this module. </p>
  <h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
  <p>So that authors can exploit the forward-compatible parsing rules to
    assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
    as appropriate</a>) any at-rules, properties, property values, keywords,
    and other syntactic constructs for which they have no usable level of
    support. In particular, user agents <strong>must not</strong> selectively
    ignore unsupported component values and honor supported values in a single
    multi-value property declaration: if any value is considered invalid
    (as unsupported values must be), CSS requires that the entire declaration
    be ignored.</p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
        the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
  <p>Once a specification reaches the Candidate Recommendation stage,
    non-experimental implementations are possible, and implementors should
    release an unprefixed implementation of any CR-level feature they
    can demonstrate to be correctly implemented according to spec. </p>
  <p>To establish and maintain the interoperability of CSS across
    implementations, the CSS Working Group requests that non-experimental
    CSS renderers submit an implementation report (and, if necessary, the
    testcases used for that implementation report) to the W3C before
    releasing an unprefixed implementation of any CSS features. Testcases
    submitted to W3C are subject to review and correction by the CSS
    Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
    can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
    Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-cssparserfunction-args">args</a><span>, in §3</span>
   <li><a href="#dom-cssparseroptions-atrules">atRules</a><span>, in §2</span>
   <li>
    body
    <ul>
     <li><a href="#dom-cssparseratrule-body">attribute for CSSParserAtRule</a><span>, in §3</span>
     <li><a href="#dom-cssparserblock-body">attribute for CSSParserBlock</a><span>, in §3</span>
     <li><a href="#dom-cssparserdeclaration-body">attribute for CSSParserDeclaration</a><span>, in §3</span>
     <li><a href="#dom-cssparserqualifiedrule-body">attribute for CSSParserQualifiedRule</a><span>, in §3</span>
    </ul>
   <li><a href="#cssparseratrule">CSSParserAtRule</a><span>, in §3</span>
   <li><a href="#dom-cssparseratrule-cssparseratrule">CSSParserAtRule(name, prelude)</a><span>, in §3</span>
   <li><a href="#dom-cssparseratrule-cssparseratrule">CSSParserAtRule(name, prelude, body)</a><span>, in §3</span>
   <li><a href="#cssparserblock">CSSParserBlock</a><span>, in §3</span>
   <li><a href="#dom-cssparserblock-cssparserblock">CSSParserBlock(name, body)</a><span>, in §3</span>
   <li><a href="#cssparserdeclaration">CSSParserDeclaration</a><span>, in §3</span>
   <li><a href="#dom-cssparserdeclaration-cssparserdeclaration">CSSParserDeclaration(name)</a><span>, in §3</span>
   <li><a href="#dom-cssparserdeclaration-cssparserdeclaration">CSSParserDeclaration(name, body)</a><span>, in §3</span>
   <li><a href="#cssparserfunction">CSSParserFunction</a><span>, in §3</span>
   <li><a href="#dom-cssparserfunction-cssparserfunction">CSSParserFunction(name, args)</a><span>, in §3</span>
   <li><a href="#dictdef-cssparseroptions">CSSParserOptions</a><span>, in §2</span>
   <li><a href="#cssparserqualifiedrule">CSSParserQualifiedRule</a><span>, in §3</span>
   <li><a href="#dom-cssparserqualifiedrule-cssparserqualifiedrule">CSSParserQualifiedRule(prelude)</a><span>, in §3</span>
   <li><a href="#dom-cssparserqualifiedrule-cssparserqualifiedrule">CSSParserQualifiedRule(prelude, body)</a><span>, in §3</span>
   <li><a href="#cssparserrule">CSSParserRule</a><span>, in §3</span>
   <li><a href="#cssparservalue">CSSParserValue</a><span>, in §3</span>
   <li><a href="#typedefdef-cssstringsource">CSSStringSource</a><span>, in §2</span>
   <li><a href="#typedefdef-csstoken">CSSToken</a><span>, in §2</span>
   <li>
    name
    <ul>
     <li><a href="#dom-cssparseratrule-name">attribute for CSSParserAtRule</a><span>, in §3</span>
     <li><a href="#dom-cssparserblock-name">attribute for CSSParserBlock</a><span>, in §3</span>
     <li><a href="#dom-cssparserdeclaration-name">attribute for CSSParserDeclaration</a><span>, in §3</span>
     <li><a href="#dom-cssparserfunction-name">attribute for CSSParserFunction</a><span>, in §3</span>
    </ul>
   <li><a href="#dom-css-parsecommavaluelist">parseCommaValueList(css)</a><span>, in §2</span>
   <li><a href="#dom-css-parsedeclaration">parseDeclaration(css)</a><span>, in §2</span>
   <li><a href="#dom-css-parsedeclaration">parseDeclaration(css, options)</a><span>, in §2</span>
   <li><a href="#dom-css-parsedeclarationlist">parseDeclarationList(css)</a><span>, in §2</span>
   <li><a href="#dom-css-parsedeclarationlist">parseDeclarationList(css, options)</a><span>, in §2</span>
   <li><a href="#dom-css-parserule">parseRule(css)</a><span>, in §2</span>
   <li><a href="#dom-css-parserule">parseRule(css, options)</a><span>, in §2</span>
   <li><a href="#dom-css-parserulelist">parseRuleList(css)</a><span>, in §2</span>
   <li><a href="#dom-css-parserulelist">parseRuleList(css, options)</a><span>, in §2</span>
   <li><a href="#dom-css-parsestylesheet">parseStylesheet(css)</a><span>, in §2</span>
   <li><a href="#dom-css-parsestylesheet">parseStylesheet(css, options)</a><span>, in §2</span>
   <li><a href="#dom-css-parsevalue">parseValue(css)</a><span>, in §2</span>
   <li><a href="#dom-css-parsevaluelist">parseValueList(css)</a><span>, in §2</span>
   <li>
    prelude
    <ul>
     <li><a href="#dom-cssparseratrule-prelude">attribute for CSSParserAtRule</a><span>, in §3</span>
     <li><a href="#dom-cssparserqualifiedrule-prelude">attribute for CSSParserQualifiedRule</a><span>, in §3</span>
    </ul>
   <li>
    stringification behavior
    <ul>
     <li><a href="#CSSParserAtRule-stringification-behavior">dfn for CSSParserAtRule</a><span>, in §3</span>
     <li><a href="#CSSParserBlock-stringification-behavior">dfn for CSSParserBlock</a><span>, in §3</span>
     <li><a href="#CSSParserDeclaration-stringification-behavior">dfn for CSSParserDeclaration</a><span>, in §3</span>
     <li><a href="#CSSParserFunction-stringification-behavior">dfn for CSSParserFunction</a><span>, in §3</span>
     <li><a href="#CSSParserQualifiedRule-stringification-behavior">dfn for CSSParserQualifiedRule</a><span>, in §3</span>
    </ul>
  </ul>
  <aside class="dfn-panel" data-for="term-for-cssstylevalue">
   <a href="https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue">https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssstylevalue">2. Parsing API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-namespacedef-css">
   <a href="https://drafts.csswg.org/cssom-1/#namespacedef-css">https://drafts.csswg.org/cssom-1/#namespacedef-css</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-namespacedef-css">2. Parsing API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attr-img-sizes">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-sizes">https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-sizes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-img-sizes">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-rs-class">
   <a href="https://streams.spec.whatwg.org/#rs-class">https://streams.spec.whatwg.org/#rs-class</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rs-class">2. Parsing API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2. Parsing API</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a> <a href="#ref-for-idl-DOMString③">(4)</a> <a href="#ref-for-idl-DOMString④">(5)</a> <a href="#ref-for-idl-DOMString⑤">(6)</a>
    <li><a href="#ref-for-idl-DOMString⑥">3. Parser Values</a> <a href="#ref-for-idl-DOMString⑦">(2)</a> <a href="#ref-for-idl-DOMString⑧">(3)</a> <a href="#ref-for-idl-DOMString⑨">(4)</a> <a href="#ref-for-idl-DOMString①⓪">(5)</a> <a href="#ref-for-idl-DOMString①①">(6)</a> <a href="#ref-for-idl-DOMString①②">(7)</a> <a href="#ref-for-idl-DOMString①③">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">2. Parsing API</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-typed-om-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cssstylevalue" style="color:initial">CSSStyleValue</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-namespacedef-css" style="color:initial">CSS</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-attr-img-sizes" style="color:initial">sizes</span>
    </ul>
   <li>
    <a data-link-type="biblio">[STREAMS]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-rs-class" style="color:initial">ReadableStream</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-typed-om-1">[CSS-TYPED-OM-1]
   <dd>Shane Stephens; Tab Atkins Jr.; Naina Raisinghani. <a href="https://www.w3.org/TR/css-typed-om-1/">CSS Typed OM Level 1</a>. 10 April 2018. WD. URL: <a href="https://www.w3.org/TR/css-typed-om-1/">https://www.w3.org/TR/css-typed-om-1/</a>
   <dt id="biblio-cssom-1">[CSSOM-1]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-streams">[STREAMS]
   <dd>Adam Rice; Domenic Denicola; 吉野剛史 (Takeshi Yoshino). <a href="https://streams.spec.whatwg.org/">Streams Standard</a>. Living Standard. URL: <a href="https://streams.spec.whatwg.org/">https://streams.spec.whatwg.org/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>typedef</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①④"><c- b>DOMString</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://streams.spec.whatwg.org/#rs-class" id="ref-for-rs-class①"><c- n>ReadableStream</c-></a>) <a href="#typedefdef-cssstringsource"><code><c- g>CSSStringSource</c-></code></a>;
<c- b>typedef</c-> (<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⑤"><c- b>DOMString</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue" id="ref-for-cssstylevalue①"><c- n>CSSStyleValue</c-></a> <c- b>or</c-> <a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue①⓪"><c- n>CSSParserValue</c-></a>) <a href="#typedefdef-csstoken"><code><c- g>CSSToken</c-></code></a>;

<c- b>partial</c-> <c- b>namespace</c-> <a class="idl-code" data-link-type="namespace" href="https://drafts.csswg.org/cssom-1/#namespacedef-css" id="ref-for-namespacedef-css①"><c- g>CSS</c-></a> {
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule①③"><c- n>CSSParserRule</c-></a>>> <a href="#dom-css-parsestylesheet"><code><c- g>parseStylesheet</c-></code></a>(<a class="n" data-link-type="idl-name" href="#typedefdef-cssstringsource" id="ref-for-typedefdef-cssstringsource④"><c- n>CSSStringSource</c-></a> <a href="#dom-css-parsestylesheet-css-options-css"><code><c- g>css</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions⑤"><c- n>CSSParserOptions</c-></a> <a href="#dom-css-parsestylesheet-css-options-options"><code><c- g>options</c-></code></a>);
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule①②"><c- n>CSSParserRule</c-></a>>> <a href="#dom-css-parserulelist"><code><c- g>parseRuleList</c-></code></a>(<a class="n" data-link-type="idl-name" href="#typedefdef-cssstringsource" id="ref-for-typedefdef-cssstringsource①①"><c- n>CSSStringSource</c-></a> <a href="#dom-css-parserulelist-css-options-css"><code><c- g>css</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions①①"><c- n>CSSParserOptions</c-></a> <a href="#dom-css-parserulelist-css-options-options"><code><c- g>options</c-></code></a>);
  <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule②①"><c- n>CSSParserRule</c-></a>> <a href="#dom-css-parserule"><code><c- g>parseRule</c-></code></a>(<a class="n" data-link-type="idl-name" href="#typedefdef-cssstringsource" id="ref-for-typedefdef-cssstringsource②①"><c- n>CSSStringSource</c-></a> <a href="#dom-css-parserule-css-options-css"><code><c- g>css</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions②①"><c- n>CSSParserOptions</c-></a> <a href="#dom-css-parserule-css-options-options"><code><c- g>options</c-></code></a>);
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule③①"><c- n>CSSParserRule</c-></a>>> <a href="#dom-css-parsedeclarationlist"><code><c- g>parseDeclarationList</c-></code></a>(<a class="n" data-link-type="idl-name" href="#typedefdef-cssstringsource" id="ref-for-typedefdef-cssstringsource③①"><c- n>CSSStringSource</c-></a> <a href="#dom-css-parsedeclarationlist-css-options-css"><code><c- g>css</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions③①"><c- n>CSSParserOptions</c-></a> <a href="#dom-css-parsedeclarationlist-css-options-options"><code><c- g>options</c-></code></a>);
  <a class="n" data-link-type="idl-name" href="#cssparserdeclaration" id="ref-for-cssparserdeclaration①"><c- n>CSSParserDeclaration</c-></a> <a href="#dom-css-parsedeclaration"><code><c- g>parseDeclaration</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a href="#dom-css-parsedeclaration-css-options-css"><code><c- g>css</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-cssparseroptions" id="ref-for-dictdef-cssparseroptions④①"><c- n>CSSParserOptions</c-></a> <a href="#dom-css-parsedeclaration-css-options-options"><code><c- g>options</c-></code></a>);
  <a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken⑤"><c- n>CSSToken</c-></a> <a href="#dom-css-parsevalue"><code><c- g>parseValue</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a> <a href="#dom-css-parsevalue-css-css"><code><c- g>css</c-></code></a>);
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken①①"><c- n>CSSToken</c-></a>> <a href="#dom-css-parsevaluelist"><code><c- g>parseValueList</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④①"><c- b>DOMString</c-></a> <a href="#dom-css-parsevaluelist-css-css"><code><c- g>css</c-></code></a>);
  <c- b>sequence</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken②①"><c- n>CSSToken</c-></a>>> <a href="#dom-css-parsecommavaluelist"><code><c- g>parseCommaValueList</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤①"><c- b>DOMString</c-></a> <a href="#dom-css-parsecommavaluelist-css-css"><code><c- g>css</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-cssparseroptions"><code><c- g>CSSParserOptions</c-></code></a> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <a data-type="object " href="#dom-cssparseroptions-atrules"><code><c- g>atRules</c-></code></a>;
  /* dict of at-rule name => at-rule type
     (contains decls or contains qualified rules) */
};

<c- b>interface</c-> <a href="#cssparserrule"><code><c- g>CSSParserRule</c-></code></a> {
  /* Just a superclass. */
};

[<a href="#dom-cssparseratrule-cssparseratrule"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥①"><c- b>DOMString</c-></a> <a href="#dom-cssparseratrule-cssparseratrule-name-prelude-body-name"><code><c- g>name</c-></code></a>, <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken③①"><c- n>CSSToken</c-></a>> <a href="#dom-cssparseratrule-cssparseratrule-name-prelude-body-prelude"><code><c- g>prelude</c-></code></a>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule④①"><c- n>CSSParserRule</c-></a>>? <a href="#dom-cssparseratrule-cssparseratrule-name-prelude-body-body"><code><c- g>body</c-></code></a>)]
<c- b>interface</c-> <a href="#cssparseratrule"><code><c- g>CSSParserAtRule</c-></code></a> : <a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑤①"><c- n>CSSParserRule</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-cssparseratrule-name"><code><c- g>name</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue①①"><c- n>CSSParserValue</c-></a>> <a data-readonly data-type="FrozenArray<CSSParserValue>" href="#dom-cssparseratrule-prelude"><code><c- g>prelude</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑥①"><c- n>CSSParserRule</c-></a>>? <a data-readonly data-type="FrozenArray<CSSParserRule>?" href="#dom-cssparseratrule-body"><code><c- g>body</c-></code></a>;
  /* nullable to handle at-statements */
  <a href="#CSSParserAtRule-stringification-behavior"><c- b>stringifier</c-></a>;
};

[<a href="#dom-cssparserqualifiedrule-cssparserqualifiedrule"><code><c- g>Constructor</c-></code></a>(<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#typedefdef-csstoken" id="ref-for-typedefdef-csstoken④①"><c- n>CSSToken</c-></a>> <a href="#dom-cssparserqualifiedrule-cssparserqualifiedrule-prelude-body-prelude"><code><c- g>prelude</c-></code></a>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑦①"><c- n>CSSParserRule</c-></a>>? <a href="#dom-cssparserqualifiedrule-cssparserqualifiedrule-prelude-body-body"><code><c- g>body</c-></code></a>)]
<c- b>interface</c-> <a href="#cssparserqualifiedrule"><code><c- g>CSSParserQualifiedRule</c-></code></a> : <a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑧①"><c- n>CSSParserRule</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue②①"><c- n>CSSParserValue</c-></a>> <a data-readonly data-type="FrozenArray<CSSParserValue>" href="#dom-cssparserqualifiedrule-prelude"><code><c- g>prelude</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule⑨①"><c- n>CSSParserRule</c-></a>> <a data-readonly data-type="FrozenArray<CSSParserRule>" href="#dom-cssparserqualifiedrule-body"><code><c- g>body</c-></code></a>;
  <a href="#CSSParserQualifiedRule-stringification-behavior"><c- b>stringifier</c-></a>;
};

[<a href="#dom-cssparserdeclaration-cssparserdeclaration"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑧①"><c- b>DOMString</c-></a> <a href="#dom-cssparserdeclaration-cssparserdeclaration-name-body-name"><code><c- g>name</c-></code></a>, <c- b>optional</c-> <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule①⓪①"><c- n>CSSParserRule</c-></a>> <a href="#dom-cssparserdeclaration-cssparserdeclaration-name-body-body"><code><c- g>body</c-></code></a>)]
<c- b>interface</c-> <a href="#cssparserdeclaration"><code><c- g>CSSParserDeclaration</c-></code></a> : <a class="n" data-link-type="idl-name" href="#cssparserrule" id="ref-for-cssparserrule①①①"><c- n>CSSParserRule</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑨①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-cssparserdeclaration-name"><code><c- g>name</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue③①"><c- n>CSSParserValue</c-></a>> <a data-readonly data-type="FrozenArray<CSSParserValue>" href="#dom-cssparserdeclaration-body"><code><c- g>body</c-></code></a>;
  <a href="#CSSParserDeclaration-stringification-behavior"><c- b>stringifier</c-></a>;
};

<c- b>interface</c-> <a href="#cssparservalue"><code><c- g>CSSParserValue</c-></code></a> {
  /* Just a superclass. */
};

[<a href="#dom-cssparserblock-cssparserblock"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⓪①"><c- b>DOMString</c-></a> <a href="#dom-cssparserblock-cssparserblock-name-body-name"><code><c- g>name</c-></code></a>, <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue④①"><c- n>CSSParserValue</c-></a>> <a href="#dom-cssparserblock-cssparserblock-name-body-body"><code><c- g>body</c-></code></a>)]
<c- b>interface</c-> <a href="#cssparserblock"><code><c- g>CSSParserBlock</c-></code></a> : <a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑤①"><c- n>CSSParserValue</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-cssparserblock-name"><code><c- g>name</c-></code></a>; /* "[]", "{}", or "()" */
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑥①"><c- n>CSSParserValue</c-></a>> <a data-readonly data-type="FrozenArray<CSSParserValue>" href="#dom-cssparserblock-body"><code><c- g>body</c-></code></a>;
  <a href="#CSSParserBlock-stringification-behavior"><c- b>stringifier</c-></a>;
};

[<a href="#dom-cssparserfunction-cssparserfunction"><code><c- g>Constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①②①"><c- b>DOMString</c-></a> <a href="#dom-cssparserfunction-cssparserfunction-name-args-name"><code><c- g>name</c-></code></a>, <c- b>sequence</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑦①"><c- n>CSSParserValue</c-></a>>> <a href="#dom-cssparserfunction-cssparserfunction-name-args-args"><code><c- g>args</c-></code></a>)]
<c- b>interface</c-> <a href="#cssparserfunction"><code><c- g>CSSParserFunction</c-></code></a> : <a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑧①"><c- n>CSSParserValue</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①③①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-cssparserfunction-name"><code><c- g>name</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#cssparservalue" id="ref-for-cssparservalue⑨①"><c- n>CSSParserValue</c-></a>>> <a data-readonly data-type="FrozenArray<FrozenArray<CSSParserValue>>" href="#dom-cssparserfunction-args"><code><c- g>args</c-></code></a>;
  <a href="#CSSParserFunction-stringification-behavior"><c- b>stringifier</c-></a>;
};

</pre>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> <code class="idl"><a data-link-type="idl" href="#dom-css-parsecommavaluelist">parseCommaValueList()</a></code> is in Syntax, and thus here,
because it’s actually a very common operation.
It’s trivial to do yourself
(just call <code class="idl"><a data-link-type="idl" href="#dom-css-parsevaluelist">parseValueList()</a></code> and then split into an array on top-level commas),
but comma-separated lists are so common
that it was worthwhile to improve spec ergonomics
by providing a shortcut for that functionality.
Is it worth it to provide this to JS as well?<a href="#issue-6a26a0eb"> ↵ </a></div>
   <div class="issue"> Do we handle comments?
Currently I don’t;
Syntax by default just drops comments,
but allows an impl to preserve information about them if they want.
Maybe add an option to preserve comments?
If so, they can appear *anywhere*,
in any API that returns a sequence.<a href="#issue-7aa73841"> ↵ </a></div>
   <div class="issue"> What do we do if an unknown at-rule
(not appearing in the <code class="idl"><a data-link-type="idl" href="#dom-cssparseroptions-atrules">atRules</a></code> option)
shows up in the results?
Default to decls or rules?
Or treat it more simply as just a token sequence?<a href="#issue-f4c16a5c"> ↵ </a></div>
   <div class="issue"> Parsing stylesheets/rule lists should definitely be async,
because stylesheets can be quite large.
Parsing individual properties/value lists should definitely be sync,
because they’re small and it would be really annoying.
Parsing a single rule, tho, is unclear—<wbr>is it large enough to be worth making async,
or is it too annoying to be worth it?<a href="#issue-1d39aadf"> ↵ </a></div>
   <div class="issue"> Trying to be as useful as possible,
without exposing so many details that we’re unable to change tokenization in the future.
In particular, whitespace and delims all get parsed into DOMStrings.
Am I succeeding at this goal?<a href="#issue-296fa7f8"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="typedefdef-cssstringsource">
   <b><a href="#typedefdef-cssstringsource">#typedefdef-cssstringsource</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedefdef-cssstringsource">2. Parsing API</a> <a href="#ref-for-typedefdef-cssstringsource①">(2)</a> <a href="#ref-for-typedefdef-cssstringsource②">(3)</a> <a href="#ref-for-typedefdef-cssstringsource③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedefdef-csstoken">
   <b><a href="#typedefdef-csstoken">#typedefdef-csstoken</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedefdef-csstoken">2. Parsing API</a> <a href="#ref-for-typedefdef-csstoken①">(2)</a> <a href="#ref-for-typedefdef-csstoken②">(3)</a>
    <li><a href="#ref-for-typedefdef-csstoken③">3. Parser Values</a> <a href="#ref-for-typedefdef-csstoken④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-css-parsevaluelist">
   <b><a href="#dom-css-parsevaluelist">#dom-css-parsevaluelist</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-parsevaluelist">2. Parsing API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-css-parsecommavaluelist">
   <b><a href="#dom-css-parsecommavaluelist">#dom-css-parsecommavaluelist</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-css-parsecommavaluelist">2. Parsing API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-cssparseroptions">
   <b><a href="#dictdef-cssparseroptions">#dictdef-cssparseroptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-cssparseroptions">2. Parsing API</a> <a href="#ref-for-dictdef-cssparseroptions①">(2)</a> <a href="#ref-for-dictdef-cssparseroptions②">(3)</a> <a href="#ref-for-dictdef-cssparseroptions③">(4)</a> <a href="#ref-for-dictdef-cssparseroptions④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-cssparseroptions-atrules">
   <b><a href="#dom-cssparseroptions-atrules">#dom-cssparseroptions-atrules</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-cssparseroptions-atrules">2. Parsing API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cssparserrule">
   <b><a href="#cssparserrule">#cssparserrule</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssparserrule">2. Parsing API</a> <a href="#ref-for-cssparserrule①">(2)</a> <a href="#ref-for-cssparserrule②">(3)</a> <a href="#ref-for-cssparserrule③">(4)</a>
    <li><a href="#ref-for-cssparserrule④">3. Parser Values</a> <a href="#ref-for-cssparserrule⑤">(2)</a> <a href="#ref-for-cssparserrule⑥">(3)</a> <a href="#ref-for-cssparserrule⑦">(4)</a> <a href="#ref-for-cssparserrule⑧">(5)</a> <a href="#ref-for-cssparserrule⑨">(6)</a> <a href="#ref-for-cssparserrule①⓪">(7)</a> <a href="#ref-for-cssparserrule①①">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cssparserdeclaration">
   <b><a href="#cssparserdeclaration">#cssparserdeclaration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssparserdeclaration">2. Parsing API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cssparservalue">
   <b><a href="#cssparservalue">#cssparservalue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cssparservalue">2. Parsing API</a>
    <li><a href="#ref-for-cssparservalue①">3. Parser Values</a> <a href="#ref-for-cssparservalue②">(2)</a> <a href="#ref-for-cssparservalue③">(3)</a> <a href="#ref-for-cssparservalue④">(4)</a> <a href="#ref-for-cssparservalue⑤">(5)</a> <a href="#ref-for-cssparservalue⑥">(6)</a> <a href="#ref-for-cssparservalue⑦">(7)</a> <a href="#ref-for-cssparservalue⑧">(8)</a> <a href="#ref-for-cssparservalue⑨">(9)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>